<template>
  <div class="module-container">
    <div class="table-container" ref="tableContent">
      <el-table
        :data="isData"
        border
        v-loading="loading"
        :show-summary="show_summary"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        @selection-change="handleSelectionChange"
        :max-height="tableHeight"
        ref="table"
      >
        <el-table-column
          type="selection"
          width="55"
          v-if="multiSelectShow"
        ></el-table-column>
        <template v-for="item in label">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :key="item.prop"
            :fixed="item.fixed"
            :sortable="item.sortable"
            v-if="item.columnType === 'slot'"
            :width="item.width ? item.width : 'auto'"
          >
            <template slot-scope="scope">
              <slot :name="item.slotName" :params="scope.row"></slot>
            </template>
          </el-table-column>
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :fixed="item.fixed"
            :sortable="item.sortable"
            :key="item.prop"
            :width="item.width ? item.width : 'auto'"
            v-else
          >
          </el-table-column>
        </template>
      </el-table>
    </div>
    <div class="paging-container" v-if="pagingShow">
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page="paginationConfig.pageIndex"
        :page-sizes="[15, 50, 100, 200, 300, 400, 1000]"
        :page-size="paginationConfig.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginationConfig.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "tableApp",
  props: {
    // 加载提示
    loading: {
      type: Boolean,
      default: false,
    },

    // 标题列表
    label: {
      type: Array,
      default: () => [],
    },

    // 分页显示
    pagingShow: {
      type: Boolean,
      default: false,
    },

    // 合计显示
    show_summary: {
      type: Boolean,
      default: false,
    },

    tabHeight: {
      type: String,
      default: "auto",
    },

    // 内容数据项
    isData: {
      type: Array,
      default: () => [],
    },

    // 是否显示多选
    multiSelectShow: {
      type: Boolean,
      default: false,
    },

    // 分页数据
    paginationConfig: {
      type: Object,
      default: () => ({}),
    },
  },

  data() {
    return {
      tableHeight: null,
    };
  },

  watch: {
    isData: {
      handler() {
        this.scrollBottom();
      },
      immediate: true,
    },
  },

  methods: {
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += " 元";
        } else {
          sums[index] = "N/A";
        }
      });

      return sums;
    },

    // 多选后
    handleSelectionChange(val) {
      let list = val.map((i) => {
        return i.id;
      });
      this.$emit("selectionChange", list);
    },

    // 每页显示条数
    handleSizeChange(val) {
      this.$emit("toggleSize", val);
    },

    // 翻页
    handleCurrentChange(val) {
      this.$emit("togglePag", val);
    },

    // 设置table最大高度
    setTableHeight() {
      this.$nextTick(() => {
        if (this.$refs.tableContent) {
          this.tableHeight = this.$refs.tableContent.offsetHeight;
        }
      });
    },

    /** 如果有数据加载再到顶部就用nexttick */
    scrollBottom() {
      this.$nextTick(() => {
        if (this.$refs.table) {
          this.$refs.table.bodyWrapper.scrollTop = 0;
        }
      });
    },
  },

  mounted() {
    let _this = this;
    // 判断是否通过计算设置table的最大高度设置滚动条
    if (_this.tabHeight === "calculate") {
      this.setTableHeight();
      window.onresize = function () {
        _this.setTableHeight();
      };
    } else {
      _this.tableHeight = "auto";
    }
  },

  destroyed() {
    window.onresize = null;
  },

  beforeDestroy() {
    window.onresize = null;
  },
};
</script>

<style lang="scss" scoped>
.module-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.table-container {
  flex: 1;
  height: 0;
  overflow: hidden;
}

.paging-container {
  text-align: center;
  margin-top: 15px;
  flex-shrink: 0;
  flex-grow: 0;
}

::v-deep .el-table th.el-table__cell {
  background-color: #fafafa;
}

::v-deep .el-table th.el-table__cell > .cell {
  font-size: 14px;
  color: #333;
  font-weight: normal;
}

::v-deep .el-table__footer-wrapper tbody td.el-table__cell,
.el-table__header-wrapper tbody td.el-table__cell {
  text-align: center;
}
</style>
